<template>
  <!-- 播放进度 组件 -->
 
  <div class="progress" :class="{zyzq: channel === 'zyzq'}" v-if="progressShow && $store.state.duration > 0  && mode === 1" >
    <div class="control-play-btn">
      <i class="iconfont icon-bofangqi-bofang" v-show="playBtnShow" @click="changeStatus(1)"></i>
      <i class="iconfont icon-iconstop" v-show="!playBtnShow" @click="changeStatus(2)"></i>
      <van-slider   active-color="rgb(231,184,71)" inactive-color="rgba(255,255,255,0.4)" :step="0.001" button-size="30px"  @change="changeVideoTime"  v-model="progress">
        <div slot="button" class="custom-button">
          <div class="block"></div>
        </div>
      </van-slider>
    </div>
    <div class="progressTime">
      <span>{{`${videoCurrTime} / ${videoadurTime}`}}</span>
    </div>
    <div class="speed" :class="{openTab: isShowTab}" @click.stop="isShowTab = !isShowTab">
      <span>{{(speedFont === '倍速' || speedFont === '正常') ? speedFont : speedFont + ' x'}}</span>
      <transition name="speed-tab">
        <div class="speed-tab" v-if="isShowTab">
          <ul @click="changeSpeed">
            <li><span :class="{checked: speedFont === 2}">2 x</span></li>
            <li><span :class="{checked: speedFont === 1.5}">1.5 x</span></li>
            <li><span :class="{checked: speedFont === 1.25}">1.25 x</span></li>
            <li><span :class="{checked: speedFont === '正常' || speedFont === '倍速'}">1 x</span></li>
            <li><span :class="{checked: speedFont === 0.5}">0.5 x</span></li>
          </ul>
        </div>
      </transition>
    </div>
    <div class="full-screen" @click="setFullScreen" v-if="mode !== 1"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        speedFont: '倍速',
        isShowTab: false
      }
    },
    props:{
       playBtnShow:Boolean,
       progress:Number,
      changeSpeedOut: Function,
      progressShow: Boolean,
      mode: Number,
      channel: String
    },
    watch: {
      speedFont(val) {
        if (val === 1) this.speedFont = '正常'
      }
    },
    computed: {
      videoCurrTime() {//当前视频播放的时长
        return this.timeRule(this.$store.state.currTime)
      },
      videoadurTime() {//当前视频播放的总时长
        return this.timeRule(this.$store.state.duration)
      }
    },
    methods:{
       // 倍速修改
       changeSpeed(e) {
        const node = e.target
        if (node.tagName === 'LI') {
          this.changeSpeedOut(this.speedFont = parseFloat(node.firstChild.innerText))
        } else {
          this.changeSpeedOut(this.speedFont = parseFloat(node.innerText))
        }
      },
      changeStatus(type){
        this.$emit("playStatus",type);
        this.$bus.$emit('changePlay', type)
      },
      changeVideoTime(progress){
        this.$emit("changeProgress",progress);
      },
      timeRule(t) {
        let time = '';
        let h = Math.floor(t/3600);//小时
        let m = Math.floor((t%3600)/60);//分
        let s = Math.floor((t%3600)%60);//秒
        let hour = /^\d$/.test(h) ? '0' + h : h;
        let min = /^\d$/.test(m) ? '0' + m : m;
        let sec = /^\d$/.test(s) ? '0' + s : s;
        return time = `${hour}:${min}:${sec}`
        // if (hour == '00') {
        //   return time = `${min}:${sec}`
        // } else {
        //   return time = `${hour}:${min}:${sec}`
        // }
		},
    setFullScreen() {
        this.$bus.$emit('setFullScreen')
      }
    }
  };
</script>
<style scoped lang="less">
  .control-play-btn{
    display: flex;
    align-items: center;
    flex: 1;
  }
  .iconfont{
    font-size: 50px;
  }
  .progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 110px;
    left: 36px;
    right: 36px;
    z-index: 11;
    padding:15px 0;
    color: #fff;
  }
  .van-slider{
    margin: 20px;
    flex: 1;
    box-sizing: border-box;
    height: 3px;
  }
  .custom-button{
    padding: 15px;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .block{
    border: 2px solid rgb(231,184,71);
    width: 20px;
    height: 20px;
    background: rgb(231,184,71);
    border-radius: 100px;
    z-index: 100;
  }
  .progressTime{
    max-width:250px;
    font-size: 24px;
    color: #fff;
    text-align: right;
  }
  .speed{
    height: 100%;
    line-height: 100%;
    text-align: center;
    margin-left: 15px;
    font-size: 24px;
    font-weight: 700;
    padding: 5px;
    border-radius: 10px;
    display: flex;
    position: relative;
    span{
      white-space: nowrap;
      font-size: 28px;
      margin: auto;
    }
  }
  
    .speed-tab-enter-active{transition: all .3s}
      
    .speed-tab-enter, .speed-tab-leave-to{
      opacity: 0;
    }
    .speed-tab{
      width: 120px;
      height: 280px;
      position: absolute;
      left: 50%;
      bottom: 140%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.7);
      border-radius: 10px;
      overflow: hidden ;
      ul{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
         li{
          width: 100%;
          padding: 5px 0;
          flex: 1;
          display: flex;
          &:active{
            background: rgba(0, 0, 0, 0.4);
          }
           span{         
            margin: auto;
            font-size: 26px;
            padding :5px 14px;
            white-space: nowrap;
            &.checked{
              border: 1px solid #fff;
              border-radius :5px ;
            }
          }                  
          }
          }
    }

  
  .full-screen{
    width: 40px;
    height :40px;
    margin-left: 15px;
    background :url('../../../../assets/images/full-screen-one.png') center/100%;
  }
  
</style>